<template>

    <client-only>
      <el-tabs model-value="logs">
        <el-tab-pane label="金币记录" name="logs">
          <el-table :data="list">
            <el-table-column prop="type" label="类型">
              <template #default="scope">
                <el-tag :type="+scope.row.type === 1 ? 'success' : 'danger'">{{ +scope.row.type === 1 ? '新增' :
                  '扣除' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="说明" />
            <el-table-column prop="gold" label="金币" />
            <el-table-column prop="createTime" label="创建时间">
              <template #default="scope">
                {{ $dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
          </el-table>
          <div class="wallet-log__pagination">
            <el-pagination background layout="prev, pager, next" :current-page="currentPage"
              :page-size="queryParams.pageSize" :pager-count="5" :total="count" @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </client-only>

</template>

<script setup lang="ts">
import { useClientRequest } from "~/composables/useClientRequest";

definePageMeta({
  middleware: ["auth"]
})

const list = ref([])
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
const count = ref(0)
const currentPage = ref<number>(1)

onMounted(() => {
  getList()
})

async function getList() {
  const { rows, total } = await useClientRequest<ResPage<any>>('/user/wallet/logs', {
    query: queryParams
  })
  list.value = rows
  count.value = total
}

function handleCurrentChange(page: number) {
  currentPage.value = page
  queryParams.pageNum = page
  getList()
}
</script>

<style lang="scss" scoped>
.wallet-log {
  &__pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
